<template>

    <div class="container">
        <m-header>
            请假登记
            <div class="h-btn" slot="r-slot">
                <van-button color="#24C373" size="small" v-prevent-re-click to="/leaveAskedList">登记记录</van-button>
            </div>

        </m-header>

        <div class="main">

            <div class="list-wrap">
                <van-pull-refresh v-model="loading" @refresh="getDataList">
                    <div class="item-wrap" v-for="(item,index) in list" :key="index" @click="toDetail(item.out_trade_no)">
                        <div class="item-box">
                            <div class="item-top">
                                <span class="title">订单号：{{item.out_trade_no}}</span>
                            </div>
                            <ul class="item-mid">
                                <li>套票类型：{{item.packag_type_name}}</li>
                                <li>学校：{{item.school_name}}</li>
                                <li>票种：{{item.ticket_typall_name}}</li>
                                <li>乘车人：{{item.passengers_name}}</li>
                                <!--<li>订单创建时间：{{item.input_time}}</li>-->
                            </ul>
                            <div class="item-bot">
                                有效时间：{{item.effective_time_start}} - {{item.effective_time_end}}
                            </div>
                            <div class="item-arrow">
                                <van-icon class="arrow" name="arrow" color="#202020" size="20"></van-icon>
                            </div>
                        </div>
                    </div>
                    <van-empty :image-size="180" v-show="!loading && !list.length" description="无可请假登记的订单，下拉刷新"></van-empty>
                </van-pull-refresh>
                <!--<m-list :total="total" :cur-num="list.length" v-model="loading" @load="getDataList" :load-end="loadEnd">-->
                <!--</m-list>-->
            </div>
        </div>
        <!--<div class="footer">
            <van-button class="btn" color="#24C373" v-prevent-re-click to="/leaveAskNoOrder">无订单请假登记</van-button>
        </div>-->
    </div>
</template>

<script>
  import form from '@/components/form/form'
  import list from '@/components/list/list';
  import {getOrder, unifiedorder} from "../../request/api";
  import {preventReClick} from "../../utils/plugins";
  import {PullRefresh,Empty } from 'vant'
  export default {
    name: "leaveList",
    components:{
      mForm: form,
      mList: list,
      [PullRefresh.name]: PullRefresh,
      [Empty.name]: Empty
    },
    data(){
      return {
        // 录入字段参数
        fields: [
          {
            label: '乘客姓名',
            type: 'text',
            disabled: false,
            field_id: 'passengers_name',
          },
          {
            label: '乘客证件号码',
            type: 'text',
            disabled: false,
            field_id: 'identification_no',
          },],
        value: {},
        list: [],
        total: 0,
        size: 10,
        no:1,
        loading: false,
        loadEnd: true,
      }
    },
    methods:{
      getDataList(first){
        let {no,size,loadEnd,filterStatus} = this,  //当前请求页数
          list = [];
        no = first ? 1 : no;
        let param = {
          no:1,size:0,
          Order_status: '已支付'
        }
        this.loading = true;
        getOrder(param).then(res => {
          let {errcode ,row,total} = res;
          if (errcode !== 0)return;
          let now = new Date().getTime();
          list = row.filter(item => {
            let start = new Date(item.effective_time_start).getTime(),
              end = new Date(item.effective_time_end).getTime();
            return now <= end
          })
          this.list = list;
          this.loading = false;
        })
      },

      onChange(e){
        let {field,val} = e,
          {field_id} = field;
        this.value[field_id] = val;
      },
      searchRecord(){
        console.log(this.value);
      },


      toDetail(id){
        this.$router.push({ path: '/leaveAsk', query: { id } })
      }
    },
    mounted(){
      this.getDataList()

    }
  }
</script>

<style scoped lang="less">
    .h-btn{
        padding-right: 10px;
    }
    .main{
        padding: 10px;
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 0;
        .box{
            background: #fff;
            border-radius: 2px;
            margin-bottom: 10px;
            padding: 10px 15px ;
            .cell{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 15px;
                height: 44px;
                border-bottom: 1px solid #dedede;
                .cell-right{
                    text-align: right;
                    flex: 1;
                    .cell-value{
                        text-align: right;
                    }
                }
            }
            .btn{
                width: 100%;
                margin-top: 10px;
            }
        }
        .list-wrap{
            flex: 1;
            height: 0;

            .item-wrap{
                padding: 0 10px;
                margin-bottom: 10px;
                & + .item-wrap{
                    margin-top: 10px;
                }
                .item-box{
                    background: #fff;
                    border-radius: 5px;
                    position: relative;
                    .item-top{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 12px 15px;
                        .title{
                            color: #2e2e2e;
                            font-weight: bold;
                            font-size: 15px;
                        }
                        .status{
                            font-size: 14px;
                            &.blue{
                                color: #1989fa;
                            }
                            &.green{
                                color: #24C373;
                            }
                            &.red{
                                color: #FF1313;
                            }
                            &.yellow{
                                color: #ffd11b;
                            }
                            &.orange{
                                color: #FF7913;
                            }
                            &.grey{
                                color: #B3B3B3;
                            }

                            &.syz,&.dsy,&.dzf{
                                color: #24C373;
                            }
                            &.ytp,&.gpsbtk{
                                color: #FF1313;
                            }
                            &.ysy{
                                color: #B3B3B3;
                            }
                            &.sqtpz{
                            }
                        }
                    }
                    .item-mid{
                        color: #2e2e2e;
                        font-size: 15px;
                        padding: 0 15px 10px;
                        line-height: 24px;
                    }
                    .item-bot{
                        border-top: 1px solid #dedede;
                        padding: 0 15px;
                        height: 37px;
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                    }
                    .item-arrow{
                        position: absolute;
                        top: calc((100% - 27px)/2);
                        transform: translateY(-50%);
                        right: 13px;
                    }
                }
            }

            .van-pull-refresh{
                height: 100%;
                overflow: auto;
            }
        }
    }
    .footer{
        padding: 20px;
        .btn{
            width: 100%;
        }
    }
</style>
